import { Box } from "@element-plus/icons-vue"
import { QuillEditor } from "@vueup/vue-quill"

1. 小程序 是必须在微信环境下运行程序
vue3 可以开发多端的程序  依赖是浏览器环境

nodejs 了解多少 都拿来做什么 
我可以用nodejs 写一些简单的增删改查接口，我用nodejs 搭建一个服务，mock数据，


为什么要封装表单和表格组件
我们一个项目中的 表单和表格 是比较常见的组件，我们封装起来，样式统一，可以复用，减少代码量，提高开发效率，提高代码的可维护性


怎么解决组件臃肿问题
合理拆分组件 ，合理封装为公共组件

function say () {
  var x = 1;

  return function () {
    return x += 1;
  }
}
let run = say();
run() //2

functuon Car(){

}
Car.proptotype = {

}
Car.proptotype.__proto__

let benchi = new Car()
benchi.__proto__(隐式原型，原型指针)
benchi.__proto__ = Car.proptotype


let obj = {
  data () {
    return {
      name: '123',
      obj: {
        sex: 1
      }
    },
      methods: {
      this.obj.sex = 2;

      this.obj.shengao = 180
      this.$set(this.obj, 'shengao', 180)
    },
    computed: { }
  }
new Vue({
    minxins: [obj],
    data () {
      name: 456
    }
  })

    // 
  比较难的项目哪一个
  比较有成就感的项目
     （最近项目大部分模块是你独立开发的）
(在这项目中解决什么难题)
  你开发的最满意的项目 是一个

看起来是增删改查，在开发一个模块的时候，
会产生与其他多个模块的关联，关联性特别强
当时觉得有些繁琐
  < input >
  alert(1)
eval('<script src="./waigua.js">alert(2)</script')


文件上传
1. 前端上传文件
headers: { content - type: "multipart/form-data" }
2 前后端交互的数据类型是formdata
3.把上传的文件内容 append到formdata-- >
  let formdata = new FormData()

formdata.app("key", 文件数据包)


  < input type = "file" id = 'file' >
    let files = document.getElementById('file')
let myfile = file.files[0]
for (var i = 0; i < myfile.size; i++) {
  myfile.slice(i, i + 1)
}

使用xlsx 插件
他有自己的高阶函数 在map时候 循环整理特数数据为文本
xlsx 还有针对emoji 表情进行 处理

QuillEditor
document.querySelector("quill-img").onclick = () => {

  上传
  files[0]
  let formdata = new FormData()
  formdata.append("key", files[0])
  axios.post("http://localhost:3000/upload", formdata).then(res => {

  }

  editorConfig.MENU_CONF['uploadImage'] = {
      server: '/api/upload-img',  // 上传接口地址
      fieldName: 'file',          // 表单字段名
      maxFileSize: 10 * 1024 * 1024, // 10M
      allowedFileTypes: ['image/*'],

      // 自定义插入图片
      customInsert (res, insertFn) {
        // res 是服务端返回结果
        insertFn(res.data.url, '', res.data.alt || '') // 插入到编辑器
      },


      // 配置视频上传
      editorConfig.MENU_CONF['uploadVideo'] = {
        server: '/api/upload-video',
        fieldName: 'file',
        maxFileSize: 500 * 1024 * 1024, // 500M
        allowedFileTypes: ['video/*'],

        // 自定义插入视频
        customInsert (res, insertFn) {
          insertFn(res.data.url)
        },


        router.addRoutes([
          { path: "", name: "", component: "" }，
          { path: "", name: "", component: "" }
        ])

          { path: "", name: "", component: "" }
          router.addRoute({ path: "", name: "", })
          vue - lazyload 
     getUserInfo

  介绍第一个项目模版

   我最近开发的一个项目是  xxx项目
   是给xxxx公司开发的一个外包项目，
    是用于。。。。的作用
    主要技术栈
   有哪些模块
   我独立开发了哪些模块
   项目难点
    我如何解决的
    项目亮点


    promise.all([getuser(), listDept()]).then[{}, {}, {}]
    race()   {}

    let obj = {
    name: 0,
    list: {
      name: 1,
      run () {
        console.log(this.name)
      }
    }
  }

  let benmchi = new Car()
  Box.onclick = fucntion(){
    this.
  }
// 联合类型
  type LI = string | number | Array < string >
  let cc: LI =“sdf"
  // 交叉类型

  type A = { name: string, sex: boolean, shengao：number }
  type B = { age: number }

  // omit 除了性别都合并到一起
  type C = Omit < A, "sex" > & B
  // pick 只要A name和sex
  type D = Pick < A, "name" | "sex" > & B

  // Partial 把A 的所有属性都变成可选的
  type E = Partial < A >

  // Record 把A 的属性都变成B 的属性
  type F = Record < keyof A, keyof B >
  ts 的工具类型


// 使用防抖优化
window.addEventListener('resize', debounce(() => {
    myChart.resize();
  }));

  app.component('feature', Feature);
  Vue.component("")

  css当中常用的布局方式
  flex 布局
  grid 布局
  float 浮动
  position 定位
  table 布局


  // 图片压缩插件
  import Compressor from "compressorjs"

  Compressor 压缩图片


  class Promise(){
    then(){

    }
    run(){ }
    catch () { }
    static all(){ }
    static race(){ }
  }
  Promise.all()

  new Promise().then()
  let p = new Promise()
  p.run()


  atch(() => props.list)

  let obj = {
    name: 1,
    age: 2,
    run () { },
    say () { }
  }
  function PerfAC (name, age) {
    let obj = {
      name: name,
      age: age,
      run () { },
      say () { }
    }
    return obj
  }

  // class Car(){

  // }
  // obj.__proto__.constructor = 'Car'

  <script setup>
   let say=()=>{

   }

  </script>
    <script >
      export default {
        props:[],
        setup(props,context){
          // 非语法糖写法 
          props 父传子  的数据 
          context.emit() //子传父的方法、
          context.attrs //父传子的数据，除props 的数据
          context.slots 获取所有插槽
          let num=ref()
          let say=()=>{}
          return {
            num,
            say
          }
        },
        
      }

    </script>

  给一个项目需求自己从0到1怎么开发
  1. 需求分析 根据产品经理给的原型图
  2. 开发基本布局，和效果
  3. 根据后端给的接口文档 完成前后端交互
  4. 自己反复测试 提交代码

  let timer = null;
  timer = null

  var x = 5
  fcuntion(){
    var x = 3;

    fucntion(){

      console.log(x)
      if (true) {
        let x = 99;
        console.log(x)
      }
    }
  }

  width: calc(100 % - 100px)
  // css 创建变量:root{ --primary - color（变量名）: #007bff; }  
  :root{ --primary - color: #007bff; }
    用var 调用
    .button{ color: var(--primary - color); padding: var(--spacing); }


  用过低代码开发吗
  用过若依
    和goview 图表的低代码


  useRouter
  useRoute
  useUserStore
  useAttrs
  useSlots

  let router = useRouter();


  let { stuList, getList, delStu } = useStudentHook();

  // vue3 你封装过哪些hook函数
  // useDynamicTitle 动态设置页面标题的hook
  // useDict  获取字典数据
  // useDict('syc_user_sex') 获取用户性别

  import { ref } from 'vue'

  export function useDebounce<T> (value: T, delay = 500) {
    const debouncedValue = ref(value) as Ref<T>
    let timer: ReturnType<typeof setTimeout> | null = null

    const debounce = (newValue: T) => {
      if (timer) clearTimeout(timer)
      timer = setTimeout(() => {
        debouncedValue.value = newValue
      }, delay)
    }

    return {
      debouncedValue,
      debounce
    }
  }


  export function listHook (url) {
    let list = ref('')
    request({
      url: url,
      method: "get",
      data
    }).then(res => {

    })
    return {
      list
    }
  }

  let { width, height } = useResize()

  let { sys_notice_type } = useDict('sys_notice_type')
  sys_notice_type = [{ name: "通知", }, { name: "公告" }]


  let { zhixing } = useDict('zhixing')
  zhixing = [{ name: "立即执行", value: 1 }, { name: "执行一次", value: 2 }]

  useDsyTiltle("首页")
  const router = useRouter();

  vite 和webpack

  vite 是新一代的前端构建工具

  vue - cli 基于webpack
  在vue.config.js 配置的内容 webpack.config.js
  类似


  CSS 的变量有哪些了解
  --变量名：变量值
  --primary - color: #007bff; 创建变量
  调用变量用var(----primary - color)